<template>
  <div class="info">
    <div class="box2">
      <el-row>
        <el-col :span="24">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="角色名称" prop="rolename">
              <el-input v-model="ruleForm.rolename"></el-input>
            </el-form-item>
            <el-form-item label="权限" prop="menus">
              <el-tree
                :data="memuRoleList"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps"
              ></el-tree>
            </el-form-item>

            <el-form-item label="状态" prop="status">
              <el-radio v-model="ruleForm.status" :label="1">正常</el-radio>
              <el-radio v-model="ruleForm.status" :label="2">禁用</el-radio>
            </el-form-item>
            <el-form-item>
              <el-button v-if="$route.params.id" type="danger" @click="submitForm('ruleForm')">立即修改</el-button>
              <el-button v-else type="success" @click="submitForm('ruleForm')">立即添加</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    var roleName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("角色名称不能为空"));
      }else{
        callback();
      }
    };
    return {
      ruleForm: {
        rolename: "",
        status: 1
      },
      defaultProps: {
        children: "children",
        label: "title"
      },
      memuRoleList:[],
      menus:[],
      rules: {
        rolename: [{ required: true, validator: roleName, trigger: "blur" }]
      }
    };
  },
  created() {
    // 获取树形控件的数据
    this.getMenuData();
    //判断新增还是修改
    if (this.$route.params.id) {
      this.getDataById(this.$route.params.id);
    }
  },
  methods: {
    // 获取树形控件的数据，注意istree=1
    getMenuData() {
      this.$http.get("menulist?istree=1").then(res => {
        this.memuRoleList = res.data.list;
      });
    },
    getDataById(id) {
      this.$http.get("/roleinfo", { params: { id } }).then(res => {
        this.ruleForm = res.data.list;
        // this.$refs.tree.setCheckedNodes([{id: 12,}]);
        this.menus=res.data.list['menus'].split(',')
        this.$refs.tree.setCheckedKeys(this.menus);
      });
    },
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // 校验成功
          if (this.$route.params.id > 0) {
            this.ruleForm.menus=this.$refs.tree.getCheckedKeys().join(',')
            this.ruleForm.id = this.$route.params.id;
            //修改角色
            this.$http
              .post("/roleedit", this.ruleForm)
              .then(res => {
                this.$router.go(-1);
              })
              .catch(err => {
                console.log(err);
              });
          } else {
            this.ruleForm.menus=this.$refs.tree.getCheckedKeys().join(',')
            // 添加角色
            this.$http
              .post("/roleadd", this.ruleForm)
              .then(res => {
                this.$router.go(-1);
              })
              .catch(err => {
                console.log(err);
              });
          }
        } else {
          // 检验失败
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="" >
.info {
  width: 100%;
  height: auto;
  background: #fff;
}
.box2 {
  width: 500px;
  margin: auto;
  padding-top: 20px;
}
</style>